<template>
  <div>
    <div id="myMap" class="map-box">

    </div>
    <button class="btn_style" @click="Calculate">turf计算</button>
    <button class="btn_style" @click="Calculate1">measure-path</button>
    <button class="btn_style" @click="Calculate2">隐藏measure-path</button>
    <div>面积：{{ area }}平方米</div>
    <div>中心点：{{ centerPoint }}</div>

  </div>
</template>

<script>
import { akProxy } from '@/utils/ak';
import Provider from '@/utils/chinatmsproviders'; // 
// import L from 'leaflet';
import { LeafLet as L } from '@/utils/compute/leaflet-measure-path.js'
// import 'leaflet-draw'
// import '@/utils/compute/leaflet.draw-cn.js'
// import '@geoman-io/leaflet-geoman-free';
// import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
import '@/utils/compute/leaflet-measure-path.css'
import * as turf from '@turf/turf'

export default {
  name: 'PreLeaflet',
  data() {
    return {
      centerPoint: '',
      area: '',
      arr: [
        [
          45.76457403389321,
          126.5932059288025
        ],
        [
          45.764559062346216,
          126.59460067749025
        ],
        [
          45.76422968729576,
          126.59534096717836
        ],
        [
          45.76334635369595,
          126.59509956836702
        ],
        [
          45.76311428915921,
          126.59345269203186
        ],
        [
          45.763731878131175,
          126.59283578395845
        ],
        [
          45.7641436003143,
          126.59294307231904
        ]
      ],
      polygon: null,
      map: null,
      maskArea: null, // 保存图形
      // positionAJ: [
      //   [45.763945225459906, 126.5919452905655],
      //   [45.76447671876591, 126.59227788448335],
      //   [45.76437566056943, 126.59249782562257],
      //   [45.76389282443723, 126.5920847654342],
      // ],
      positionAJ: [[46.4553992727125, 123.64118814468385
      ], [46.45586677038164, 123.64708229899409
      ], [46.457093701697275, 123.64685699343681
      ], [46.4571703839866, 123.64776492118837
      ], [46.45532997923819, 123.64805191755296
      ], [46.45481350909873, 123.64125654101372
      ]],
      drawControl: null,
      drawObj: null,
      drawLayerGrounp: null,
      existPolygonOpts: {
        color: "rgba(0, 58, 255, 0.85)",
        weight: 2,
        opacity: 0.85,
        // 是否显示量测信息
        showMeasurements: true,
        // 量测信息的属性：
        measurementOptions: {
          showOnHover: true // 开始鼠标移动到图形上时显示量测信息
        }
      },
    }
  },
  mounted() {
    Provider(L)
    this.getMap()
  },
  methods: {
    getMap() {
      const positionAJ = this.positionAJ
      let myCenter = new L.LatLng(45.763968, 126.591629) // 设置地图中心
      let map = L.map('myMap', {
        center: myCenter,
        zoom: 18,
        // drawControl: true
      })

      this.map = map
      L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', { maxZoom: 18, minZoom: 5, key: akProxy.ak }).addTo(map);
      L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', { maxZoom: 18, minZoom: 5, key: akProxy.ak }).addTo(map);

      L.polygon(positionAJ).addTo(map);

      map.on('click', e => {
        console.log(e)
        // const icon = L.icon({
        //   //图标地址
        //   iconUrl: "http://skybjf.github.io/img/article/insert/20151016/yvdi.gif",
        //   iconSize: [38, 95], //图标大小
        // });
        // this.arr.push([e.latlng.lat, e.latlng.lng])
        // L.marker([e.latlng.lat, e.latlng.lng], {
        //   //设置图标
        //   icon: icon,
        // }).addTo(this.map);
        // console.log(this.arr)
      })

    },

    drawCreatedBack(e) {
      console.log(e)
    },
    Calculate() {
      let pointArr = []
      pointArr = this.positionAJ
      pointArr.push(this.positionAJ[0])
      console.log(pointArr)
      const polygon = turf.polygon([
        pointArr
      ])
      this.area = turf.area(polygon)
      this.centerPoint = turf.centroid(polygon).geometry.coordinates;
    },
    Calculate1() {
      this.polygon = L.polygon(this.positionAJ).addTo(this.map).showMeasurements();
    },
    Calculate2() {
      this.polygon.hideMeasurements()
    },
    drawBoundary() {
      let map = this.map
      let coordArr = this.positionAJ
      let mapNW = map.getBounds().getNorthWest();
      let mapNE = map.getBounds().getNorthEast();
      let mapSE = map.getBounds().getSouthEast();
      let mapSW = map.getBounds().getSouthWest();

      // 添加到闭合图形中
      let maskArr = [];
      maskArr.push(mapNW);
      maskArr.push(mapSW);
      maskArr.push(mapSE);
      maskArr.push(mapNE);
      maskArr.push(mapNW); // 设置为闭合区域的起点

      // 添加各闭合点      
      coordArr.map(res => {
        let points = [];
        res.map(subRes => {
          console.log(subRes)
          // subRes.map(item => {
          // points.push({ lat: subRes[1], lng: subRes[0] });
          // });

        });

        //将闭合区域加到遮罩层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
        maskArr = maskArr.concat(points);
        maskArr.push(maskArr[0]);
      })
      if (this.maskArea) {
        this.maskArea.remove(map)
        this.maskArea = null
      }
      // 添加遮罩
      let maskArea = L.polygon(maskArr, {
        color: "transparent", // 边界颜色
        fillColor: "#B7D2EA", // 填充色
        fillOpacity: 0.8, // 填充透明度
      });
      maskArea.addTo(map);
      this.maskArea = maskArea
    },
  },
}
</script>

<style scoped>
/* @import '~leaflet-draw/dist/leaflet.draw.css'; */

#myMap {
  height: 70vh;
}

.btn_style {
  padding: 10px;
  margin-right: 20px;
}
</style>
